<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="template.xhtml">

	<ui:define name="head">
		<style type="text/css">
			.label {
				width: 80%;
				padding:2px;                                
			}
			.name {
				width:150px;
				padding:2px;
			}
			.surname {
				width:150px;
				padding:2px;
			}
			.email {
				width:230px;
				padding:2px;
			}
			.password {
				width:150px;
				padding:2px;
			}
			.grid {
				width:100%;
			}
			.panel {
				width:45%;
			}
			.combo {
				width:110px;
			}
		</style>
	</ui:define>

  <ui:define name="content">
        <h:form prependId="false">
                <p:panel id="panelUser" header="Novo Usuário" styleClass="panel">
                        <p:growl showDetail="true"/>

                        <h:panelGrid columns="2" styleClass="grid">

                                <h:outputLabel for="name" value="Nome" styleClass="label" />
                                <h:inputText id="name" value="#{createUser.user.name}" required="true" requiredMessage="Nome obrigatório" validatorMessage="Tamanho máximo 20 caracteres" styleClass="name">
                                        <f:validateLength maximum="20" />
                                </h:inputText>

                                <h:outputLabel for="surname" value="Sobrenome" styleClass="label" />
                                <h:inputText id="surname" value="#{createUser.user.surname}" required="true" requiredMessage="Sobrenome" validatorMessage="Tamanho máximo 20 caracteres" styleClass="surname">
                                        <f:validateLength maximum="20" />
                                </h:inputText>

                                <h:outputLabel for="email" value="Email" styleClass="label" />
                                <h:inputText id="email" value="#{createUser.user.email}" required="true" requiredMessage="Email obrigatório" validatorMessage="Tamanho máximo 150 caracteres" styleClass="email">
                                        <f:validateLength maximum="150" />
                                </h:inputText>

                                <h:outputLabel for="password" value="Senha" styleClass="label" />
                                <p:password id="password" minLength="6" value="#{createUser.user.password}" styleClass="password"
                                    required="true"
                                    promptLabel="Entre com a senha" weakLabel="Senha fraca"
                                    goodLabel="Senha boa" strongLabel="Senha segura" />
                        </h:panelGrid>

                        <h:panelGroup>
                                <h:panelGrid columns="2">
                                        <p:commandButton value="Cadastrar" actionListener="#{createUser.save}" async="true" ajax="false" update="panelUser" />
                                </h:panelGrid>
                        </h:panelGroup>
                </p:panel>
        </h:form>
  </ui:define>

</ui:composition>